<template>
  <div class="home">
    <NavbarHomepage :isLogin="false" />
    <div class="main">
      <div class="top">
        <h3>快速搭建你的物联网仿真网络<br />进而测试它们的可靠性。</h3>
        <img src="@/assets/green-heart.png" />
      </div>
      <div class="bot">
        <h4>为什么要使用我们的系统</h4>
        <div class="card" id="card_1">
          <div class="cheader">加速你的创建和测试</div>
          <div class="cbody">
            森罗万象入侵监测仿真系统可以快速搭建一个模拟真实物联网的环境，用户自己想要模拟的节点类型，并可以自行设计节点之间的拓扑结构，模拟真实的物联网环境下的攻击。
          </div>
        </div>
        <div class="card" id="card_2">
          <div class="cheader">加速你的创建和测试</div>
          <div class="cbody">
            森罗万象入侵监测仿真系统可以快速搭建一个模拟真实物联网的环境，用户自己想要模拟的节点类型，并可以自行设计节点之间的拓扑结构，模拟真实的物联网环境下的攻击。
          </div>
        </div>
        <div class="card" id="card_3">
          <div class="cheader">加速你的创建和测试</div>
          <div class="cbody">
            森罗万象入侵监测仿真系统可以快速搭建一个模拟真实物联网的环境，用户自己想要模拟的节点类型，并可以自行设计节点之间的拓扑结构，模拟真实的物联网环境下的攻击。
          </div>
        </div>
      </div>
    </div>
    <div class="login">
      <div class="login_container">
        <img
          class="mb-4"
          src="@/assets/logo.png"
          alt=""
          width="72"
          height="72"
        />
        <h1 class="h3 mb-3 font-weight-normal">您好，请登录</h1>
        <input
          type="email"
          id="inputEmail"
          class="form-control"
          placeholder="键入你的账号"
          required=""
          autofocus=""
          v-model="loginAccount"
        />
        <input
          type="password"
          id="inputPassword"
          class="form-control"
          placeholder="键入你的密码"
          required=""
        />
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me" /> 记住密码
          </label>
        </div>
        <button
          class="btn btn-lg btn-primary btn-block"
          type="submit"
          v-on:click="login()"
        >
          登录
        </button>
        <p class="mt-5 mb-3 text-muted">© 2021-2022</p>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import NavbarHomepage from "@/components/NavbarHomepage.vue";

export default {
  name: "Home",
  components: {
    NavbarHomepage,
  },
  data: function () {
    return {
      loginAccount: "",
    };
  },
  methods: {
    login: function () {
      sessionStorage.setItem("account", this.loginAccount);
      this.$router.push("/dashboard");
    },
  },
};
</script>

<style scoped>
.main {
  width: 65%;
  left: 2.5%;
  top: 70px;
  position: relative;
  float: left;
}
.login {
  width: 30%;
  top: 70px;
  left: 2.5%;
  position: relative;
  float: left;
}
.login_container {
  width: 90%;
  left: 5%;
  top: 60px;
  position: relative;
}
.top {
  width: 100%;
  top: 0px;
  height: 300px;
  position: relative;
  background: #fafafa;
  border-radius: 30px;
}
.top img {
  top: 73px;
  right: 60px;
  position: absolute;
}
/* .top button {
  top: 180px;
  left: 295px;
  position: absolute;
} */
.top h3 {
  top: 110px;
  width: 450px;
  left: 145px;
  position: absolute;
}
.bot {
  top: 15px;
  width: 100%;
  height: 290px;
  position: relative;
  background: #ffffff;
}
.card {
  width: 30%;
  margin-left: 2.5%;
  float: left;
  border: 0px;
}
.card .cheader {
  font-size: 20px;
}
.card .cbody {
  font-size: 16px;
  text-align: left;
}
</style>